<template>
  <!-- 统计区 -->
  <div class="bg-sta">
    <div class="Statistics ">
      <div ref="slider" class="cntent">
        <div v-for="item in titleData" :key="item.status" class="itemBox">
          <div class="number" :style="{ color: item.color}">{{ item.value }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
      <div v-if="titleData.length>6" class="left" @click="stepClick(false)"><i class="el-icon-arrow-left" /></div>
      <div v-if="titleData.length>6" class="right" @click="stepClick(true)"><i class="el-icon-arrow-right" /></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  props: {
    titleData: {
      type: Array,
      default: () => []
    },
    cardSelect: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentIndex: 0,
      selectedIndex: 0,
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
    }
  },
  watch: {
    cardSelect: {
      handler(newVal, oldVal) {
        console.log(newVal, '999')
        this.selectedIndex = newVal
        console.log(this.selectedIndex, newVal, '999')
        // this.selectItem(newVal)
      },
      deep: true
    }
  },
  mounted() {
    this.updateSliderPosition()
  },
  methods: {
    selectItem(index, item) {
      this.selectedIndex = index
      this.$emit('dealTableList', item)
    },
    next() {
      if (this.currentIndex < this.titleData.length - 6) {
        this.currentIndex++
        this.updateSliderPosition()
      }
    },
    prev() {
      if (this.currentIndex > 0) {
        this.currentIndex--
        this.updateSliderPosition()
      }
    },
    updateSliderPosition() {
      const dom = this.$refs.slider
      // margin
      const computedStyle = window.getComputedStyle(this.$refs.slider.querySelector('.itemBox'))
      const marginRight = computedStyle.getPropertyValue('margin-right')
      const marginRightNum = Number(marginRight.slice(0, -2))
      // width
      const slideWidth = this.$refs.slider.querySelector('.itemBox').offsetWidth
      // 0.2  是误差
      dom.style.transform = 'translateX(-' + this.currentIndex * (slideWidth + marginRightNum - 0.2) + ')px'
    },
    stepClick(type) {
      if (type) {
        // 向右
        this.next()
      } else {
        // 向左
        this.prev()
      }
    }
  }

}
</script>
<style lang="scss" scoped>
    .selectedBack{
      background: #DAE8F6 !important;
      border: 1px solid #1890ff;
    }
  .bg-sta{
    // background: #FFF;
    // background: #F2F2F2;
    border-radius: 4px;
    // padding: 16px 0px;
    height: 130px;
    width: 100%;
    position: relative;
    margin-bottom: 24px;
  }
  .Statistics{
    overflow-y: hidden;
    overflow-x: hidden;

    .title{
      font-size: 14px;
    }
    .cntent{
      width: 100%;
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      transition: transform 0.3s ease-in-out;
      .itemBox{
        height: 100%;
        min-width:15%;
        // max-width: 20%;
        cursor: pointer;
        padding: 24px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        // border: 1px dashed #000;
        // border-spacing: 10px 1px;
        background: #fff;
        border-radius: 4px;
        margin-right:2%;
        flex: 1;
        .number{
          font-size: 32px;
        }
        .name{
          font-size: 14px;
        }
      }
      :last-child{
        margin-right:0px;
      }
    }
    .left{
      position: absolute;
      left: 10px;
      top: 125px;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .right{
      position: absolute;
      right: 10px;
      top: 125px;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }

</style>
<style lang="scss">
.Statistics{
  .el-range-editor--medium .el-range-input{
    background: none !important;
  }
  .el-date-editor .el-range-input{
    width: 36%;
  }
}
</style>
